<!DOCTYPE html>
<html>
<head>
	<meta  name = "viewport" content = "initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no">
	<link rel="stylesheet" href="../../codebase/webix.css" type="text/css" media="screen" charset="utf-8">
	<script src="../../codebase/webix.js" type="text/javascript" charset="utf-8"></script>
	<script src="../common/chartdata.js"></script>
	<title>Left position</title>
	<style>
		.my_menu .webix_view{
			background-color: #ECEFF1;
		}
		.my_menu .webix_list_item{
			line-height: 35px;
			border-bottom-color: #ddd;
		}


	</style>
</head>
<body>


<script type="text/javascript" charset="utf-8">
	webix.ready(function(){
		webix.ui({
			rows:[
				{
					view: "toolbar", id:"toolbar", elements:[
					{
						view: "icon", icon: "bars",
						click: function(){
							if( $$("menu").config.hidden){
								$$("menu").show();
							}
							else
								$$("menu").hide();
						}
					},
					{
						view: "label",
						label: "Demo"
					}

				]
				},
				{
					template: "Click 'menu' icon to show a menu"
				}
			]
		});

		webix.ui({
			view: "sidemenu",
			id: "menu",
			width: 200,
			position: "left",
			state:function(state){
				var toolbarHeight = $$("toolbar").$height;
				state.top = toolbarHeight;
				state.height -= toolbarHeight;
			},
			css: "my_menu",
			body:{

				view:"list",
				borderless:true,
				scroll: false,

				template: "<span class='webix_icon fa-#icon#'></span> #value#",
				data:[
					{id: 1, value: "Customers", icon: "user"},
					{id: 2, value: "Products", icon: "cube"},
					{id: 3, value: "Reports", icon: "line-chart"},
					{id: 4, value: "Archives", icon: "database"},
					{id: 5, value: "Settings", icon: "cog"}
				],
				select:true,
				type:{
					height: 40
				}
			}
		});

	});




</script>

</body>
</html>